<template>
    <div class="home-index">
        <!--块类统计-->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box-card">
                    <h3>商品本月销量</h3>
                    <div>
                        <i class="el-icon-s-shop" style="color: purple"></i>
                        <span>2424132</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <h3>累计用户数</h3>
                    <div>
                        <i class="el-icon-user-solid" style="color: green"></i>
                        <span>12763</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <h3>月消费增长率</h3>
                    <div>
                        <i class="el-icon-s-flag" style="color: red"></i>
                        <span>28%</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <h3>入驻商家数</h3>
                    <div>
                        <i class="el-icon-star-on" style="color: blue"></i>
                        <span>358</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        
        <!-- echarts统计图 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box-card">
                    <LeftTop/>
                </el-card>
                <el-card class="box-card">
                    <LeftBottom/>
                </el-card>
            </el-col>
            
            <el-col :span="12">
                <el-card class="box-card">
                    <CenterEcharts/>
                </el-card>
            </el-col>
    
            <el-col :span="6">
                <el-card class="box-card">
                    <RightTop/>
                </el-card>
                <el-card class="box-card">
                    <RightBottom/>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import CenterEcharts from "@/components/index/centerEcahrts";
import LeftTop from "@/components/index/leftTop";
import LeftBottom from "@/components/index/leftBottom";
import RightTop from "@/components/index/rightTop"
import RightBottom from "@/components/index/rightBottom"

export default {
    name: 'home',
    components: {
        LeftTop,
        LeftBottom,
        CenterEcharts,
        RightTop,
        RightBottom
    }
}
</script>

<style scoped>
.el-card {
    margin-bottom: 20px;
    text-align: center;
}

.home-index {
    opacity: 0.7;
    padding: 0 10px;
}

</style>
